import type { Preview } from "@storybook/react"
import { ConfigProvider } from "antd"
import React from "react"
import { IntlProvider } from "react-intl"
import { Provider } from "react-redux"
import { localeConfig } from "../src/locales"
import { HistoryRouter, history } from "../src/routes/history"
import store from "../src/stores"

const locale = "zh_CN"

export const decorators = [
	Story => (
		<Provider store={store}>
			<ConfigProvider
				theme={{
					token: { colorPrimary: "#13c2c2" },
					components: {
						Select: {
							borderRadius: 3
						},
						Input: {
							borderRadius: 3
						},
						DatePicker: {
							borderRadius: 3
						},
						Button: {
							borderRadius: 3
						}
					}
				}}
			>
				<IntlProvider locale="en" messages={localeConfig[locale]}>
					<HistoryRouter history={history}>
						<Story />
					</HistoryRouter>
				</IntlProvider>
			</ConfigProvider>
		</Provider>
	)
]

const preview: Preview = {
	parameters: {
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i
			}
		}
	},
	decorators: decorators
}

export default preview
